<template>
	<view class="tabbar">
		<view class="tabbar-item" :class="{'item-font':isindex }">
			<view @click="to(true)" class="baseIcon" :class="isindex ? 'home-active' : 'home'"></view>
			首页
		</view>
		<view @click="scan" class="scancode">
			<view class="backgroud"></view>
		</view>
		<view class="tabbar-item" :class="{'item-font':!isindex }">
			<view @click="to(false)" :class="isindex ? 'message' : 'message-active'" class="baseIcon"></view>
			反馈消息
		</view>
	</view>
</template>

<script>
	import permision from "../util/permission.js"
	export default {
		props:['isindex'],
		data() {
			return {
				result: ''
			}
		},
		methods:{
			to(index){
				this.$emit('to', index)
			},
			async scan() {
				// console.log(permision)
				// #ifdef APP-PLUS
				let status = await this.checkPermission();
				if (status !== 1) {
				    return;
				}
				// #endif
				uni.scanCode({
					success: (res) => {
						this.result = res.result
						uni.navigateTo({
							url:'/pages/scanCode/scanCode?res=' + this.result 
						})
					},
					fail: (err) => {
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = res.authSetting['scope.camera'];
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: 'Hello uni-app需要使用您的相机，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				});
			}
			// #ifdef APP-PLUS
			,
			async checkPermission(code) {
				let status = permision.isIOS ? await permision.requestIOS('camera') :
					await permision.requestAndroid('android.permission.CAMERA');
			
				if (status === null || status === 1) {
					status = 1;
				} else {
					uni.showModal({
						content: "需要相机权限",
						confirmText: "设置",
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppSetting();
							}
						}
					})
				}
				return status;
			}
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
.tabbar{
	z-index: 1000;
	position: fixed;
	bottom: 0px;
	display: flex;
	justify-content: space-around;
	width: 100%;
	height: 60px;
	background-color: #fff;
	box-sizing: border-box;
	font-size:10px;
	font-family:PingFang SC;
	color:rgba(196,203,212,1);
	box-shadow:0px 0px 14px 0px rgba(0, 0, 0, 0.08);
	border-radius:20px 20px 0px 0px;
	background:rgba(255,255,255,1);
	font-weight:bold;
	.item-font{
		color:rgba(64,89,255,1);
	}
	.tabbar-item{
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.baseIcon{
		width: 22px;
		height: 22px;
		background-size: 100% 100%;
		background-position: center center;
	}
	.home-active{
		background-image: url('../static/img/icon_home_click@3x.png');
	}
	.home{
		background-image: url('../static/img/icon_home_notclicked@3x.png');
	}
	.message-active{
		background-image: url('../static/img/icon_message_click@3x.png');
	}
	.message{
		background-image: url('../static/img/icon_message_notclicked@3x.png');
	}
	.scancode{
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: -25px;
		width: 50px;
		height: 50px;
		.backgroud{
			width: 100%;
			height: 100%;
			box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.08),5px -5px 5px rgba(0, 0, 0, 0.08),-5px 5px 5px rgba(0, 0, 0, 0.08),-5px -5px 5px rgba(0, 0, 0, 0.08);
			border-radius: 50%;
			background: url('../static/img/icon_qrcode@3x.png') center center;
			background-size: 130% 130%;
		}
	}
}
</style>
